<template>
  <div class="container">
    <div class="topTools">
      <div class="toolL">
        <div class="swiper">
          <div v-for="(item, index) in 4" :key="index" class="hollow-circle"></div>
        </div>
        <el-switch v-model="switchFlg" />
      </div>
      <div class="toolR" @click="toggleFullscreen">
        <FullScreen style="width: 2em; height: 1.5em; margin-top: 0.3em" />
        <div>全屏</div>
      </div>
    </div>
    <div class="main">
      <el-row class="chart">
        <Card title="全市劳动力学历分布情况">
          <Chart :option="degOption"></Chart>
        </Card>
      </el-row>
      <el-row class="chart">
        <Card title="全市劳动力年龄分布情况">
          <Chart :option="ageOption"></Chart>
        </Card>
      </el-row>
      <el-row class="chart">
        <Card title="全市劳动力性别分布情况">
          <Chart :option="sexOption"></Chart>
        </Card>
      </el-row>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "RightVeiw",
});
</script>
<script setup lang="ts">
import { ref } from "vue";
import { FullScreen } from "@element-plus/icons-vue";
import type { chartDataType } from "./chartType";
import Card from "./card.vue";
import Chart from "./chart.vue";
import { colorHandler } from "./utils";
import { getPie3D } from "./pie_3d";
import { chartStore } from "@/stores/chartData";
import "swiper/css";
let chartData = chartStore();
const { degData, ageData, sexData } = chartData;

// Import Swiper styles

const switchFlg = ref(true);
//学历表 3d环形图

//颜色
const degColor = ["#5f78d6", "#9de39d", "#ceb256"];
colorHandler(degData, degColor);
let degOption = getPie3D(degData, 0.8, 200, 28, 26, 1);

//年龄分布情况

let ageColor = ["#c33d74", "#c76312", "#c6c12c", "#339d92"];
colorHandler(ageData, ageColor);
const ageOption = {
  legend: {
    right: "2%",
    top: "25%",
    orient: "vertical",
    padding: 5,
    itemGap: 20,
    textStyle: {
      color: "white", // 设置图例文本颜色
      fontSize: 14, // 设置图例文本字体大小
    },
  },
  series: [
    {
      type: "pie",
      radius: ["20%", "70%"],
      center: ["30%", "50%"],
      roseType: "radius",
      label: {
        show: false,
      },
      data: ageData,
    },
  ],
};
//男女分布情况

let sexColor = ["#56d6ff", "#f1477b"];
colorHandler(sexData, sexColor);
const sexOption = {
  legend: {
    right: "2%",
    top: "40%",
    orient: "vertical",
    padding: 5,
    itemGap: 20,
    textStyle: {
      color: "white", // 设置图例文本颜色
      fontSize: 14, // 设置图例文本字体大小
    },
  },
  title: {
    text: "性别比率",
    left: "29%",
    top: "45%",
    textStyle: { color: "white" }, // 设置标题水平居中
  },
  series: [
    {
      type: "pie",

      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center",
      },
      center: ["40%", "50%"],

      data: sexData,
      radius: ["30%", "60%"],
    },
  ],
};

//全屏

const toggleFullscreen = function () {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
};
</script>
<style scoped>
.topTools {
  height: 70px;
  margin-left: 24px;
  padding-top: 12px;
  position: relative;
  .toolL {
    position: absolute;
    z-index: 10;
    left: 0;
    width: 200px;
    height: 50px;
    padding-top: 12px;
    display: flex;
  }
  .toolR {
    position: absolute;
    right: 15px;
    z-index: 10;
    font-size: 24px;
    line-height: 52px;
    height: 52px;
    color: #49d6db;
    display: flex;
    width: 110px;
    justify-content: space-between;
    cursor: pointer;
  }
}
.container {
  height: 100%;
  width: 100%;
  .main {
    width: 100%;
    height: calc(100% - 70px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .chart {
    width: 100%;
    height: 32%;
  }
}
.swiper {
  display: flex;
  height: 100%;
  width: 150px;
  align-items: center;
  background-color: #0f213a;
  justify-content: space-around;
  .activeName {
    border-radius: 50%;
    background-color: #3498db;
  }

  .hollow-circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 3px solid #3498db;
  }
}
</style>
